import React from 'react';
import { ChevronRightIcon } from '@heroicons/react/16/solid';
import clsx from 'clsx';

export interface SiderToggleProps {
  className?: string;
  expanded?: boolean;
  size?: 'xs' | 'sm' | 'lg';
  onExpand?: (expanded: boolean) => void;
}

function SiderToggleNoMemoized(props: SiderToggleProps) {
  const { className, expanded, size = 'sm', onExpand } = props;
  return (
    <button
      aria-label="toggle"
      type="button"
      title={expanded ? '收起侧边栏' : '展开侧边栏'}
      className={clsx(
        'btn btn-circle btn-soft dark:[--btn-color:#9254de] btn-primary',
        {
          'btn-xs': size === 'xs',
          'btn-sm': size === 'sm',
          'btn-lg': size === 'lg',
        },
        className
      )}
      onClick={() => {
        onExpand?.(!expanded);
      }}
    >
      <ChevronRightIcon
        className={clsx(
          'transition-transform',
          {
            'size-3': size === 'xs',
            'size-4': size === 'sm',
            'size-5': size === 'lg',
          },
          expanded && 'rotate-180'
        )}
      />
    </button>
  );
}

export const SiderToggle = React.memo(SiderToggleNoMemoized);
